<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org"
      xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity3">
<head th:include="public/page_css::page_css ('集拼箱')" />
<body>
<div id="simplewizardinwidget" class="wizard" data-target="#simplewizardinwidget-steps">
    <div class="layui-card">
        <div class="layui-collapse"  lay-filter="test">
            <form class="layui-form layui-form-pane" id="myform">
                <div class="layui-colla-item">
                    <h2 class="layui-colla-title">箱明细</h2>
                    <div class="layui-colla-content layui-show">
                        <label class="layui-form-label">箱编号</label>
                        <div class="layui-input-inline">
                            <input type="text" name="xbh" id="xbh" autocomplete="off" class="layui-input">
                        </div>
                        <div class="layui-col-xs24" >
                            <table data-height="200" data-single-select="false"	 id="table"></table>
                        </div>
                    </div>
                </div>
                <div class="layui-colla-item">
                    <h2 class="layui-colla-title">箱操作</h2>
                    <div class="layui-colla-content layui-show">
                        <div class="layui-col-xs24" style="max-height: 300px;overflow: auto">
                            <table data-height="200" id="table1"></table>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label">箱型</label>
                            <div class="layui-input-inline">
                                <select lay-ignore="lay-ignore" class="xx" name="xx" style="width: 193px;"></select>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="layui-input-block" style="float: right;">
                    <button class="layui-btn" lay-submit lay-filter="add">拼箱</button>
                </div>
            </form>
        </div>
    </div>
</div>
</body>
<div th:include="public/public_js::public_js"></div>
<script th:src="@{/plugin/beyond/assets/js/fuelux/wizard/wizard-custom.js}"></script>

<script>
    $(function () {
        $('.xx').select2({
            ajax: {
                url: '/zxsswms/wmsSetBox/getXx',
                dataType: 'json',
                type: 'POST',
                contentType: "application/json",
                data: function (params) {
                    var query = {
                        value: params.term
                    };
                    return JSON.stringify(query);
                },
                processResults: function (data) {
                    var arr= new Array();
                    if(data){
                        for (var i=0;i<data.length;i++){
                            arr.push({id:data[i].dictionaryid,text:data[i].value});
                        }
                    }
                    console.log(arr);
                    // Tranforms the top-level key of the response object from 'items' to 'results'
                    return {
                        results: arr
                    };
                },
                cache: true
            },
            language: "zh-CN",
            placeholder: '请输入查询字段',
            allowClear: true
        });
    })
    layui.use(['myform','zzpUtils','form','laydate','jquery','zzpValidation'],function () {
        var form = layui.form,
            zzpUtils = layui.zzpUtils
            ,laydate = layui.laydate
            ,zzpValidation = layui.zzpValidation
            ,$ = layui.jquery;
        var ind = "";
        var currentIframe = "";
        $(".confirm").click(function (e, value, row, index) {
            var formObject = {};
            //自动将form表单封成json
            var formArray = $("#tiaozhengForm").serializeArray();
            $.each(formArray, function (i, item) {
                formObject[item.name] = item.value;
            });
            var row = formObject;
            row.sl = $("#sl").val();
            $table1.bootstrapTable('updateRow',{index: ind, row: row});
            layer.close(currentIframe);
        });
        var $table = zzpUtils.table({
            elem: '#table',
            isApi: true,
            pagination:false,
            showColumns: false,
            columns: [
                {
                    field: 'xbh',
                    title: '箱编号',
                },{
                    field: 'hpbh',
                    title: '货品编号'
                },{
                    field: 'hpmc',
                    title: '货品名称'
                },{
                    field: 'sl',
                    title: '数量',
                }],
            detailFormatter: function (index, row) {
                return "这里就没有确定过11";
            },
            onDblClickRow: function (row) {
                var data = $table1.bootstrapTable('getData');
                var returnrows = $.map(data,function (rowdata) {
                    if(rowdata.id==row.id){
                        return rowdata.id;
                    }
                })
                if(returnrows.length>0){
                    alert("已存在不能重复添加");
                }else{
                    var newdata = $.extend(true,[],row); //复制一份数据
                    $table1.bootstrapTable("append",row);
                }
            },
            queryParams: function () {//查询条件
                return zzpUtils.getFormJson($("#myform"));
            },
            detailFormatter: function (index, row) {
                return "这里就没有确定过11";
            }
        });
        $('#xbh').on('input propertychange', function(data) {
            var xbh=$("#xbh").val();
            var query={
                xbh:xbh
            }
            if(xbh.length==18){
                $.ajax({
                    type: "POST",
                    url: "/zxsswms/wmsSetBox/getXmx",
                    dataType: "JSON",
                    async: false,
                    contentType: 'application/json',
                    data:JSON.stringify(query),
                    success: function (data) {
                        $table.bootstrapTable('append', data.rows);
                    },
                    error: function () { console.log("Error"); }
                });
            }else if(xbh.length!=18&&xbh!=""){
                layer.msg("箱编号输入有误，请重新输入！");
            }
        })
        var $table1 = zzpUtils.table({
            elem: '#table1',
            isApi: true,
            pagination:false,
            showColumns: false,
            url: '[{}]',
            columns: [
                {
                    field: 'xbh',
                    title: '箱编号',
                },{
                    field: 'hpbh',
                    title: '货品编号'
                },{
                    field: 'hpmc',
                    title: '货品名称'
                },{
                    field: 'sl',
                    title: '数量',
                }],
            detailFormatter: function (index , row) {
                return "这里就没有确定过11";
            },
        });
        //添加一行
        $("#addbtn").on('click',function () {
            var isRepeat;
            var $rows = $table.bootstrapTable('getSelections');
            console.log('$row', $rows);
            var tabledata = $table1.bootstrapTable('getData');
            console.log('tabledata', tabledata);
//            console.log(JSON.stringify($rows));
            //$copytable.bootstrapTable('append', $rows[0]);
            if (tabledata.length ===0) {
                $table1.bootstrapTable('append', $rows);
            } else {
                for (var i=0;i<$rows.length;i++){
                    isRepeat = tabledata.every(function (item) {
                        return (item.id !== $rows[i].id)
                    });
                    if (!isRepeat){
                        break;
                    }
                }
                console.log('isRepeat', isRepeat);
                if (isRepeat) {
                    $table1.bootstrapTable('append', $rows);
                } else {
                    layer.msg('已存在不能重复添加');
                }
            }
        });
        // 执行保存
        form.on("submit(add)",function(data){
            var field = data.field;
            zzpUtils.confirm("是否确认添加",function(index){
                var arr=[];
                var SaveData = {};
                var wardList=[];
                var rows="";
                //获取table数据
                var TableData = $table.bootstrapTable('getData');
                if (TableData.length > 0) {
                    TableData.forEach(function (item) {
                        var items = item;
                        delete items.index;
                        rows=items;
                    });
                    wardList.push(rows.id);
                    SaveData.dz=rows.dz;
                    SaveData.ids =wardList;
                    SaveData.lxr=rows.lxr;
                    SaveData.zzxid=field.xx;
                    if(field.xx!=""){
                        zzpUtils.action({
                            url:"/wmsSetBox/add",
                            data: JSON.stringify(SaveData),
                            success:function (data) {
                                setTimeout(function(){
                                    var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
                                    parent.layer.close(index); //再执行关闭
                                    top.layer.msg(data.title);
                                },500);
                            },error: function (xhr, textStatus) {
                                console.log(textStatus);
                                console.log(xhr);
                            }
                        })
                    }else{
                        layer.msg('请选择箱型');
                    }
                } else {
                    layer.msg('您还不能保存，明细为必填项');
                }
            })
            return false;
        })
        $(".inline-search-btn").on('click', function () {
            zzpUtils.refreshTable("#table");
        });
    });

</script>
</html>